<template>
  <main class="supplier-system">
    <div class="min-pc-width system">
      <p class="header"><span>第6页</span></p>
      <!-- <a-form :form="form" @submit="handleSubmit"> -->
      <a-form :form="form" @submit="handleSubmit">
        <p class="content mt20">附件上传 </p>
        <p class="rcolor mt20">上传文件大小均不能超过5M</p>
        <a-form-item label="计划任务书或者合同书(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.planfile}}<a-icon class="tip" type="close" @click="deleteDoc('planfile')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'planfile')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="工作报告(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.workfile}}<a-icon class="tip" type="close" @click="deleteDoc('workfile')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'workfile')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="技术报告（研制报告）(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.technofile}}<a-icon class="tip" type="close" @click="deleteDoc('technofile')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'technofile')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="科技查新报告（三年内）有科技项目咨询报告的可一并提供(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.kjchaxinfile}}<a-icon class="tip" type="close" @click="deleteDoc('kjchaxinfile')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'kjchaxinfile')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="效益分析证明（科技成果实践应用效果表）(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.xiaoyifile}}<a-icon class="tip" type="close" @click="deleteDoc('xiaoyifile')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'xiaoyifile')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="用户意见(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.yonghuyijianfile}}<a-icon class="tip" type="close" @click="deleteDoc('yonghuyijianfile')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'yonghuyijianfile')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="知识产权证明(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.zhishichanquanfile}}<a-icon class="tip" type="close" @click="deleteDoc('zhishichanquanfile')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'zhishichanquanfile')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="应用过程照片或影像(支持图片、PDF、office、视频文件且文件大小不超过100M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.yyyingxiangifile}}<a-icon class="tip" type="close" @click="deleteDoc('yyyingxiangifile')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload1" accept=".doc,video/*,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'yyyingxiangifile')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="主要完成人签字扫描件(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.mainrensqmfile}}<a-icon class="tip" type="close" @click="deleteDoc('mainrensqmfile')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'mainrensqmfile')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="其他证明材料（如涉及，需提供）(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.qitazmfile}}<a-icon class="tip" type="close" @click="deleteDoc('qitazmfile')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'qitazmfile')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <div class="supplier-footer">
          <a-button @click="goBack" class="s-btn">
            返回
          </a-button>
          <a-button html-type="submit"  class="s-btn"  @click="save">
          <!-- <a-button html-type="submit" class="s-btn"> -->
            保存
          </a-button>
          <a-button @click="resetForm" class="s-btn">
            重填
          </a-button>
          <a-button  type="primary" html-type="submit"  @click="goNext" class="s-btn">
            提交
          </a-button>
        </div>
    </a-form>
    </div>
  </main>
</template>
<script>
export default {
  data () {
    return {
      currentIndex: 0,
      form: this.$form.createForm(this),
      headers: {
        authorization: 'authorization-text'
      },
      formId: '',
      type: 0,
      formData: '',
      uploadUrl: `${process.env.VUE_APP_URL}/main/upload`,
      file: {
        planfile: '',
        workfile: '',
        technofile: '',
        kjchaxinfile: '',
        xiaoyifile: '',
        yonghuyijianfile: '',
        zhishichanquanfile: '',
        yyyingxiangifile: '',
        qitazmfile: '',
        mainrensqmfile: ''
      }
    }
  },
  components: {
  },
  computed: {
  },
  created () {
    if (this.$route.query.id) {
      this.formId = this.$route.query.id
      this.getKJCXFormDataById()
    }
  },
  methods: {
    goBack () {
      this.$router.push({ path: `/innovation/supplier/5?id=${this.formId}` })
    },
    goNext () {
      this.type = 1
    },
    save () {
      this.type = 0
    },
    deleteDoc (key) {
      this.file[key] = ''
    },
    beforeUpload (file) {
      if (file.size > 5242880) {
        this.$message.warning("文件大小不能超过5M")
        return false
      }
    },
    beforeUpload1 (file) {
      if (file.size > 5242880 * 20) {
        this.$message.warning("文件大小不能超过100M")
        return false
      }
    },
    getKJCXFormDataById () {
      this.$http.queryCgjdForm({ id: this.formId }).then(res => {
        this.formData = res.data
        this.file = {
          planfile: res.data.planfile,
          workfile: res.data.workfile,
          technofile: res.data.technofile,
          kjchaxinfile: res.data.kjchaxinfile,
          xiaoyifile: res.data.xiaoyifile,
          yonghuyijianfile: res.data.yonghuyijianfile,
          zhishichanquanfile: res.data.zhishichanquanfile,
          yyyingxiangifile: res.data.yyyingxiangifile,
          qitazmfile: res.data.qitazmfile,
          mainrensqmfile: res.data.mainrensqmfile
        }
      })
    },
    memberStepForm (values) {
      if (!this.file.planfile) {
        this.$message.warning(`请上传计划任务书或者合同书`)
        return false
      }
      if (!this.file.workfile) {
        this.$message.warning(`请上传工作报告`)
        return false
      }
      if (!this.file.technofile) {
        this.$message.warning(`请上传技术报告（研制报告）`)
        return false
      }
      if (!this.file.kjchaxinfile) {
        this.$message.warning(`请上传科技查新报告（三年内）有科技项目咨询报告的可一并提供`)
        return false
      }
      if (!this.file.xiaoyifile) {
        this.$message.warning(`请上传效益分析证明（科技成果实践应用效果表）`)
        return false
      }
      if (!this.file.yonghuyijianfile) {
        this.$message.warning(`请上传用户意见`)
        return false
      }
      if (!this.file.zhishichanquanfile) {
        this.$message.warning(`请上传知识产权证明`)
        return false
      }
      if (!this.file.yyyingxiangifile) {
        this.$message.warning(`请上传应用过程照片或影像`)
        return false
      }
      if (!this.file.mainrensqmfile) {
        this.$message.warning(`请上传主要完成人签字扫描件`)
        return false
      }
      Object.assign(values, this.file, { id: this.formId })
      let _this = this
      if (!this.type) {
        _this.$http.persistCgjdForm(Object.assign(values, { id: this.formId })).then(res => {
        })
      } else {
        this.showDialog({
          title: '提示',
          msg: '确认提交吗',
          lBtnText: '取消',
          rBtnText: '确认',
          confCallBack () {
            _this.$http.persistCgjdForm(values).then(res => {
              _this.$http.submitCgjdForm({ id: _this.formId }).then(res => {
                _this.$router.push({ path: '/innovation/supplier/final' })
              })
            })
          }
        })
      }
    },
    handleChange (info, key) {
      if (info.file.status === "done") {
        this.file[key] = info.file.response.fileName
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    handleSubmit (e) {
      let _this = this
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          _this.memberStepForm(values)
        }
      })
    },
    resetForm () {
      this.form.resetFields()
    }
  }
}
</script>
<style lang="scss">
</style>
